<!DOCTYPE html>
<html>
<head>
    <title>Adding and deleting Nodes</title>
    <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
    <script src="../common/treedata.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/samples.css">
</head>
<body>
<div class='header_comment'>Adding and deleting tree nodes</div>
<div id="testA" style='width:250px; height:300px;'></div>
<br>
<input type="button" value="Add to top" onClick="addToTop()"/>
<input type="button" value="Add to selected parent" onClick="addToParent()"/>
<br>
<input type="button" value="Add as 2nd child of Shawshank Redemption" onClick="addAsChild()"/>
<br>
<input type="button" value="Remove selected node"  onClick="removeSelected()"/>

<script type="text/javascript" charset="utf-8">

    var tree = new webix.ui({
        container:"testA",
        view:"tree",
        select:true,
        template:"{common.icon()} {common.folder()} <span>#value#</span>",
        data: webix.copy(smalltreedata)
    });

    function addToTop(){
        tree.add({ value:"New item"}, 0);
    }

    function addToParent(){
        var parentId= tree.getSelectedId();
        if(parentId)
            tree.add( {value:"New item"}, 0, parentId);
        else
            webix.alert("Select node")
    }

    function addAsChild(){
        tree.select("1");
        var parentId = tree.getSelectedId();
        var pos = tree.getBranchIndex("1.2"); //'1.2' is the 'Part2' item's id
        tree.add( {value:"New item"}, pos, parentId);
    }

    function removeSelected(){
        var nodeId = tree.getSelectedId();
        tree.remove(nodeId);
    }


</script>
</body>
</html>